<template>
    <div v-show='listshow' class='player_list' @click.stop>
        <div class='top' @mousewheel.prevent @touchmove.prevent>
            <div class="playstyle">
                <span @click="setplaystyle">{{getplaystyle()}}({{$store.state.songslist.length}})</span>
            </div>
            <span class="playerlist_title">播放队列</span>
                <div class="delallbtn">
                    <i class='el-icon-delete player_list_delall' @click.stop='delAllsong'></i>
                </div>
        </div>
        <div class='songlist' @touchmove.stop @mousewheel.stop>
            <div class='song' v-for='(item,index) in $store.state.songslist' :key='index' ref='nowsong'
                 @click.stop='playsong(item)'>
                <div class='content'>
                    <span class='number' v-show="$store.state.nowsongInfo.id==item.id?false:true">{{index<9?'0'+(index+1):index+1}}</span>
                    <img class='numberpic' v-show="$store.state.nowsongInfo.id==item.id?true:false"
                         :src='item.imgUrl||defaultpic' alt=''>
                    <span class='songinfo'>
               <div :class="['songname',{'activesong':$store.state.nowsongInfo.id==item.id}]">{{item.songname}}</div>
               <div :class="['singername',{'activesong':$store.state.nowsongInfo.id==item.id}]">{{item.singername}}</div>
          </span>
                </div>
                <span class='btngroup'>
            <i class='el-icon-delete' @click.stop='delsong(item.id)'></i>
          </span>
            </div>
        </div>
        <div class='bottom' @click='closelist'>关闭</div>
    </div>
</template>

<script>
  import defaultpic from 'common/image/default.png'

  export default {
    name: 'playerlist',
    data() {
      return {
        nowsongflag: this.$store.state.nowsongInfo.id,
        defaultpic,
        //  播放方式
        playstyle:{
          'normal': '顺序播放',
          'random': '随机播放',
          'single': '单曲循环'
        }
      }
    },
    // 接收父组件player传的值
    // listshow：播放列表显示（true/false）、songlist歌曲列表
    props: ['listshow'],
    mounted() {
      //   console.log(this.$refs.playerlist.style)
      //   this.$refs.playerlist.style.height=window.height+'px';
      // console.log(this.$refs.playerlist.style.height)
    },
    methods: {
      // 获取播放方式
      getplaystyle(){
        for (let key in this.playstyle){
          if (key==this.$store.state.playstyle){     //eslint-disable-line
            return this.playstyle[key]
          }
        }
      },
      // 设置播放方式
      setplaystyle(){
        switch (this.$store.state.playstyle) {
        case 'normal':
          this.$store.commit('setPlayStyle', 'random');
          break;
        case 'random':
          this.$store.commit('setPlayStyle', 'single');
          break;
        case 'single':
          this.$store.commit('setPlayStyle', 'normal');
          break;
        default:
          return false;
        }
      },
      //  删除所有播放列表
      delAllsong() {
        this.$store.commit('delAllSongList');
        this.$store.commit('setnowSongInfo', '');
        this.$store.commit('setMusicStatu', false);
      },
      //  关闭播放列表
      closelist() {
        this.$emit('closelist')
      },
      // 点击播放列表任意歌曲，将歌曲信息赋给store中的nowsonginfo,播放状态true
      playsong(item) {
        this.$store.commit('setnowSongInfo', item);
        this.$store.commit('setMusicStatu', true);
      },
      delsong(id) {
        this.$store.commit('delOneSongList', id)
      }
    }
  }
</script>

<style scoped>
    .listcontainer {
        width: 100%;
        height: 100%;
        background-color: grey;
        opacity: 0.6;
        z-index: 99999;
    }

    .song {
        display: flex;
        background-color: #fff;
        color: #000;
        justify-content: space-between;
        border-bottom: 1px solid lightgrey;
    }
    /*最后一个歌曲底线去除*/
    .song:last-child{
        border-bottom: none;
    }
    .content {
        display: flex;

    }

    .number {
        height: 2.5rem;
        min-width: 2.5rem;
        line-height: 2.5rem;
    }

    .numberpic {
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 50%;
    }

    .songinfo {
        padding-top: 0.3em;
        padding-bottom: 0.2em;
        padding-left: 0.3em;
        line-height: 1em;
        text-align: left;
    }

    .songlist {
        height: 15em;
        overflow: auto;
    }

    .songname {
        font-size: 1em;
    }

    .singername {
        font-size: 0.6em;
        color: grey;
        /*text-overflow: -o-ellipsis-lastline;*/
        /*overflow: hidden;*/
        /*text-overflow: ellipsis;*/
        /*display: -webkit-box;*/
        /*-webkit-line-clamp: 2;*/
        /*line-clamp: 2;*/
    }

    .player_list {
        position: fixed;
        width: 100%;
        height: 18.5em;
        bottom: 0;
        background-color: #fff;
        text-align: center;
        color: #000;
        box-sizing: border-box;
        opacity: 1;
        overflow: scroll;
    }
    .playerlist_title{
        font-size: 1em;
        line-height: 1em;

    }
    .btngroup {
        height: 100%;
    }

    .el-icon-delete {
        transform: scale(1.2, 1.2) translate(-0.2em, 0.5em);
    }

    .top {
        border-bottom: 1px solid lightgrey;
        padding: 0.4em 0;
        /*height: 1rem;*/
        position: relative;
    }

    .bottom {
        position: fixed;
        width: 100%;
        padding: 0.3em 0;
        font-size: 0.9em;
        line-height: 0.9em;
        bottom: 0;
        border-top: 1px solid lightgrey;
        height: 1em;
    }

    .activesong {
        color: dodgerblue;
    }
    .delallbtn {
        position: absolute;
        right: 0;
        top: 0.4em;
        /*display: inline-block;*/
        /*vertical-align: center;*/
        /*height: 100%;*/
    }
    .player_list_delall {

        transform: translateX(-0.25rem) scale(1.2, 1.2);
    }
    .playstyle {
        position: absolute;
        left: 0;
        margin-left: 0.5em;
        font-size: 0.9em;
    }
</style>
